<template lang="pug">
    el-card(shadow="never")
      div(slot="header",class="clearfix")
          span 编辑胰岛素泵销售资料
          div(class="pull-right")
            el-button(type="text",@click="close",style="margin-top:-8px")
              i(class="el-icon-close")

      el-form(:model="newPumpSaleInfo",ref="newPumpSaleInfoForm")
        el-form-item(prop="customerName",:rules="[{required:true, message: '请填写客户姓名'}]")
            el-input(placeholder="客户姓名",v-model="newPumpSaleInfo.customerName")
        el-form-item
            el-select(placeholder="胰岛素泵品牌",v-model="brandId",clearable,@change="brandChange")
                el-option(v-for="brand in linkageData",:label="brand.name",:value="brand.value",:key="brand.value")
        el-form-item(prop="pumpModelId",:rules="[{required:true, message: '请选择胰岛素泵型号'}]")
            el-select(placeholder="胰岛素泵型号",v-model="newPumpSaleInfo.pumpModelId",clearable)
                el-option(v-for="brand in modelOptions",:label="brand.name",:value="brand.value",:key="brand.value")
                span(v-if="brandId && modelOptions.length == 0") 
                    span 该胰岛素品牌下没有型号数据
                    router-link(to="/insulin/model") 查看
        el-form-item(prop="pumpNo",:rules="[{required:true, message: '请填写胰岛素泵编号'}]")
            el-input(placeholder="胰岛素泵编号",v-model="newPumpSaleInfo.pumpNo")
        el-form-item(prop="phone",
          verify phone alias="手机号码",
          error-message="请填写正确的手机号码")
            el-input(placeholder="客户联系电话",v-model="newPumpSaleInfo.phone")
        el-form-item(prop="purchaseAt",:rules="[{required:true, message: '请填写购买时间'}]")
            el-date-picker(type="date",placeholder="购买时间",v-model="newPumpSaleInfo.purchaseAt")

      div(class="card-footer")
          div(class="pull-right")
              submit-button(@click="submit",:loading="submiting",type="warning")
                i(class="el-icon-check")
                span 更新

</template>

<script>
import Vue from "vue";

import axios from "@/plugin/axios";

import PumpSaleInfoNewModel from "./PumpSaleInfoNewModel";
import BaseNew from "@/mixins/BaseNew";

import dayjs from "dayjs";
import ElementUiVerify from "element-ui-verify";
Vue.use(ElementUiVerify);

export default {
  name: "pump-sale-info-edit",
  mixins: [BaseNew],
  data() {
    return {
      newPumpSaleInfo: new PumpSaleInfoNewModel(),
      linkageQuerying: false,
      linkageData: [],
      brandId: null, // 胰岛素泵品牌ID
      querying: false
    };
  },
  watch: {
    brandId(val) {
      if (!val) this.newPumpSaleInfo.pumpModelId = null;
    },
    id(val) {
      if (val) {
        this.getPumpSaleInfo();
      }
    }
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: String, default: null }
  },
  computed: {
    // 型号选项，根据选择的胰岛素品牌级联
    modelOptions() {
      const brandId = this.brandId;
      if (!brandId) return [];

      const brandMatched = this.linkageData.find(brand => {
        return brand.value == brandId;
      });
      if (!brandMatched) return [];
      return brandMatched.children;
    }
  },
  methods: {
    submit() {
      if (this.submiting) return; // 防止重复提交
      this.$refs.newPumpSaleInfoForm.validate(valid => {
        if (valid) this.doSubmit();
      });
    },
    doSubmit() {
      var purchaseAt = this.newPumpSaleInfo.purchaseAt;
      var purchaseAt = dayjs(purchaseAt).format("YYYY-MM-DD HH:mm:ss");
      var option3 = { purchaseAt: purchaseAt };
      var data = Object.assign({}, this.newPumpSaleInfo, option3); // 时间格式会被Encode成为null

      axios({
        method: "post",
        url: "/PumpSaleInfo/Update",
        data: { model: data }
      })
        .then(data => this.submitSuccess(data))
        .catch(() => (this.submiting = false));
    },
    submitSuccess(data) {
      this.submiting = false;
      this.showUpdateSuccess();
      // this.resetForm("newPumpSaleInfoForm");
      // this.newPumpSaleInfo.pumpNo = null;
      // this.newPumpSaleInfo.phone = null;
      this.$refs.newPumpSaleInfoForm.clearValidate(["pumpNo", "phone"]);
      this.$emit("success"); // 提交事件
    },
    // 获取胰岛素泵品牌和型号下拉选项数据
    getBrands() {
      this.linkageQuerying = true;
      axios({ method: "post", url: "/PumpSaleInfo/GetBrands" })
        .then(linkageData => this.getSelectionSuccess(linkageData))
        .catch(() => (this.linkageQuerying = false));
    },
    getSelectionSuccess(linkageData) {
      this.linkageQuerying = false;
      this.linkageData = linkageData;
    },
    brandChange() {
      const modelOptions = this.modelOptions;
      this.newPumpSaleInfo.pumpModelId = modelOptions.length
        ? modelOptions[0].value
        : "";
      this.$refs["newPumpSaleInfoForm"].clearValidate();
    },
    reset() {
      this.resetForm("newPumpSaleInfoForm");
      this.brandId = null;
    },
    close() {
      this.$emit("close");
    },
    getPumpSaleInfo() {
      this.querying = true;
      axios({
        method: "post",
        url: "PumpSaleInfo/GetPumpSaleInfo",
        data: { id: this.id }
      })
        .then(info => this.getPumpSaleInfoSuccess(info))
        .catch(() => (this.querying = false));
    },
    getPumpSaleInfoSuccess(info) {
      this.querying = false;
      this.brandId =info.pumpModel.pumpBrandId;
      this.newPumpSaleInfo = info;
    }
  },
  created() {
    this.getBrands();
    if(this.id) this.getPumpSaleInfo();
  }
};
</script>
